<template>
  <div class="page sound-settings">
    <div class="scroll-view">
      <customHeader middleTitle="支付打印设置"
                    @leftCallBack="goBack" />
      <selecteDevice v-if="selecteDeviceShow"
                     ref="selecteDevice"
                     :type="type"
                     :shopId="shopId"
                     :sn="sn"
                     :shopName="shopName"
                     @setChecked="handleSelecteDeviceChecked"
                     @handleCancel="handleSelecteDeviceCheckedCancel" />
      <div class="page-body">
        <div class="img"></div>
        <template>
          <div class="device-info">
            <span class="name">{{deviceName}}</span>
            <span class="sn">{{sn}}</span>
          </div>
          <div class="ul-title">打印来源</div>
          <ul class="ul-list">
            <li>
              <span>收款码收款</span>
              <div>
                <mt-switch v-model="isOpen"
                           @change="handleSwitchChange"></mt-switch>
              </div>
            </li>
            <li v-if="qrcodeVoiceSwitchModel">
              <span>指定收款码</span>
              <div style="height:32px"
                   @click="showSelecteDevice()">{{ newBindCodePlateList.length > 0 ? `已选择${newBindCodePlateList.length}个` : '未绑定'}}
                <i class="zhk-list_rarrow"></i>
              </div>
            </li>
          </ul>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast, Range } from "mint-ui";
import selecteDevice from "./selecteDevice";
Vue.component(Range.name, Range);
export default {
  name: "paySettings",
  data() {
    return {
      sn: this.$route.query.sn,
      shopId: this.$route.query.shopId,
      supplierId: this.$route.query.supplierId,
      type: this.$route.query.type,
      shopName: this.$route.query.shopName,
      isOpen: this.$route.query.printSourceSwitch == 1,
      printSourceSwitch: this.$route.query.printSourceSwitch,
      deviceName: this.$route.query.deviceName,
      bindCodePlateList: JSON.parse(this.$route.query.bindCodePlateList),
      newBindCodePlateList: JSON.parse(this.$route.query.bindCodePlateList),
      qrcodeVoiceSwitchModel: this.$route.query.bindCodePlateList.length > 0,
      selecteDeviceShow: false,
      loadding: false
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    //设置开关
    handleSwitchChange() {
      const url = '/app/remote/print/modifyHasDevicePrint.do';
      let param = {
        sn: this.sn,
        shopId: this.shopId,
        supplierId: this.supplierId,
        printSourceSwitch: this.isOpen?'1':'0'
      };
      this.ajax({
        url: url,
        type: "post",
        data: param,
        controlLoading: false
      })
      .then(res => {
        if (res.success == true) {

        } else {
          Toast(res.msg);
        }
      })
      .catch(err => {

      });
    },
    showSelecteDevice(item) {
      this.selecteDeviceShow = true;
      this.$nextTick(() => {
        this.$refs.selecteDevice.popupShow(
          {
            limitationList: this.newBindCodePlateList? this.newBindCodePlateList:[],
            switchType: "PAY_PRINT",
            shopName: this.shopName,
            deviceName: this.deviceName,
            supplierId: this.supplierId
            }
          );
      });
    },
    handleSelecteDeviceChecked(codes) {
      this.selecteDeviceShow = false;
      this.newBindCodePlateList = codes;
      // debugger;
    },
    handleSelecteDeviceCheckedCancel() {
      this.selecteDeviceShow = false;
    },
  },
  created() {

  },
  components: {
    customHeader,
    selecteDevice
  }
};
</script>

<style lang="scss" scoped>
@import "qrCodeSound";
</style>
<style lang="scss" scoped>
.mint-switch {
  display: inline-flex;
}
</style>
